import React, { Component } from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import { List, InputItem, WhiteSpace,Button,ImagePicker,
  Radio,Toast,Popover, 
  NavBar, Icon,
  Accordion, Flex,
  Progress, WingBlank
} from 'antd-mobile';
import "./inputForm.scss"
import axios from 'axios'
import { BASE_URL } from '../../utils/requestPath';
import QRCode from 'qrcode.react'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import md5 from 'js-md5'
import yhq from '../../assets/img/yhq.jpg'
import requestAxios from '../../utils/myaxios'
React.Component.prototype.$md5 = md5;
const Item = Popover.Item;
const RadioItem = Radio.RadioItem;
const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

class InputForm extends Component {

    state = {
        userTxt:"",
        addressTxt:"",
        value:0,
        addressIp:"",
        addressIpUt:"",
        codeUrl:"http://www.jrw888.cn/?id=12333#/",
        visible: false,
        selected: '',
        headerTxt:"您是通过什么渠道认识ZEblu",
        phoneTxt:"",
        emailTxt:"",
        passWordTxt:"",
        passWordsTxt:"",
        localStorageName:"",
        percent: 50,
    }
    add = () => {
      let p = this.state.percent + 10;
      if (this.state.percent >= 100) {
        p = 100;
      }
      this.setState({ percent: p });
    }
    clear = ()=>{
      let p = this.state.percent - 10;
      if (this.state.percent <= 0) {
        p = 0;
      }
      this.setState({ percent: p });
    }

    handleClick = (params) => {
        //this.props.history.push("/searchCenter");
        const {value,phoneTxt,addressTxt,addressIp,emailTxt,passWordTxt,passWordsTxt} = this.state;
        if(!addressIp){
            
          //return;
        }else if(!phoneTxt){
            //alert("手机号不能为空")
            Toast.info('手机号不能为空', 2, null, false);
            return;
        }else if(!emailTxt){
            
            Toast.info('邮箱不能为空', 2, null, false);
            return;
        }else if(!passWordTxt){
            
            Toast.info('密码不能为空', 2, null, false);
            return;
        }else if(passWordsTxt !== passWordTxt){
            Toast.info('密码输入不一致', 2, null, false);
            return;
        }

        // let userName = userTxt;
        // let address = addressTxt;
        // let start = value; //亚马逊还是乐天
        let platformAddress = value; //0是亚马逊,1是乐天,2是其它
        let telephone = phoneTxt;
        let address = addressTxt;
        let ipAddress = addressIp;
        let zgEmail = emailTxt;
        let passWord = passWordTxt;

        let param = {platformAddress,telephone,address,ipAddress,zgEmail,passWord};

        axios.post("http://localhost:9999/api/user/add/userInfo/",param).then(res=>{
            if(res.data.flag){
                //跳转到活动福利页
                this.props.history.push("/subsuccess");
            }else{
                alert(res.data.message)
            }
        })
    }
    onChange = (value) => {
        let name = "";
        if(value === 0){
            name = "亚马逊";
        }else if(value === 1){
            name = "乐天"
        }
        console.log('checkbox');
        this.setState({
          value,
          headerTxt:name
        });
      };
      onChangeSelect = (key) => {
        console.log(key);
      }
    
     async componentDidMount(){
           //获取当前ip地址---搜狐api获取
            // await axios.get("/cityjson?ie=utf-8").then(res=>{
            //         //console.log(res.data)
            //         //var returnCitySN = {"cip": "119.123.198.5", "cid": "440305", "cname": "广东省深圳市南山区"};
            //         console.log(res.data)
            //         let city = res.data;
            //         let cityUt = res.data.split("name")[1].replace('": "',"").replace('"};',"")
                    
            //         let citys = city.split(":")[1].split(",")[0].replace('"','').replace('"','').replace(" ","");
            //         this.setState({
            //         addressIp:citys,
            //         addressTxt:cityUt
            //     }) 
             
            //     console.log(citys)

            // })
            console.log("调用接口地址.......axios外部")
            //获取当前ip地址
            // await axios.get("http://route.showapi.com/2152-1?showapi_appid=694342&showapi_sign=fd35d179ed8c4262b7dce2ba1b4dc59e").then(res=>{
            //     console.log("调用接口地址.......")
            //     console.log(res.data)
            //     this.setState({
            //         addressIp:res.data.showapi_res_body.ip,
            //         addressTxt:res.data.showapi_res_body.region
            //     })
            // })

            await axios.get("https://route.showapi.com/632-1?showapi_appid=734024&showapi_timestamp=20210814160315&showapi_sign=2eefd700317c4359bc749b0436fce8d8").then(res=>{
              console.log("全球api调用地址--------------------------")
              console.log(res.data)
                this.setState({
                  addressIp:res.data.showapi_res_body.ip,
                  addressTxt:res.data.showapi_res_body.region
              })
            })

            //md5加密
            let str = "123456";
            let data = this.$md5(str)
            console.log("接口加密")
            console.log(data)

            //存储数据
            localStorage.setItem("name","Michael")
            

            const name = localStorage.getItem("name");
            this.setState({
              localStorageName:name
            })
            console.log(name)


      }

      //下拉方法
      onSelect = (opt) => {
        // console.log(opt.props.value);
        this.setState({
          visible: false,
          selected: opt.props.value,
        });
      };
      handleVisibleChange = (visible) => {
        this.setState({
          visible,
        });
      };

      //事件输入绑定
      onfileChange=(e)=>{

        console.log(e)
        console.log("事件传递进来了"+e)


      }
    render() {
        const { value,codeUrl,percent} = this.state;
        const data = [
        { value: 0, label: '亚马逊' },
        { value: 1, label: '乐天' },
        ];
        return (
          <div className="app"
            style={{padding:"10px"}}
          >
         
          <div className="header"
            style={{
              width:"100%",height:"100%"
            }}
          >
            {/* 头部图片 */}
            <div className="header_top_img"
              style={{width:"100%",height:"180px",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}}
            >
              <img 
                style={{width:"100%",height:"100%"}}
              src={yhq}></img>
            </div>

            {/* 中间from表单 */}
            <div className="main_from">
            <List>
              
              <InputItem
                  clear
                  placeholder="手机号"
                  value={this.state.phoneTxt}
                  onChange={txt=>this.setState({phoneTxt:txt})}
              >
                  {/* <div style={{ backgroundImage: 'url(http://qvlj6gd8v.hn-bkt.clouddn.com/phone.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} /> */}
              </InputItem>
              <InputItem
                  clear
                  placeholder="邮箱"
                  value={this.state.emailTxt}
                  onChange={txt=>this.setState({emailTxt:txt})}
              >
                  {/* <div style={{ backgroundImage: 'url(http://qvlj6gd8v.hn-bkt.clouddn.com/email.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} /> */}
              </InputItem>
              
              <InputItem
                  clear
                  placeholder="登陆密码"
                  value={this.state.passWordsTxt}
                  onChange={txt=>this.setState({passWordsTxt:txt})}
                  type={'password'}
              >
                  {/* <div style={{ backgroundImage: 'url(http://qvlj6gd8v.hn-bkt.clouddn.com/pass.png)', backgroundSize: 'cover', height: '22px', width: '22px' }} /> */}
              </InputItem>

              {/* 再次输入密码 */}
              <InputItem
                  clear
                  placeholder="确认密码"
                  value={this.state.passWordTxt}
                  onChange={txt=>this.setState({passWordTxt:txt})}
                  type={'password'}
              >
                
              </InputItem>

              </List>
          {/* 手风琴 */}
          {/* <div style={{ marginTop: 10, marginBottom: 10 }}>
                  <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChangeSelect}>
                    <Accordion.Panel header={this.state.headerTxt}>
                      <List className="my-list">
                      {data.map(i => (
                          <div>
                              <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                                  {i.label}
                              </RadioItem>
                          </div>
                          ))}
                        
                      </List>
                    </Accordion.Panel>
                  
                  </Accordion>
                </div> */}
                {/* 手风琴结束 */}
            </div>

            {/* 底部提交按钮 */}
            <div className="footer_submit">
              <Button
                  type="primary" onClick={this.handleClick}>注册立即领取</Button>
            </div>
          </div>

          {/* 数据存储 */}
          <div>{this.state.localStorageName}</div>
  
          {/* <div className="progress-container">
          <Progress percent={30} position="fixed" />
          <div style={{ height: 18 }} />
          <div className="show-info">
            <div><Progress percent={percent} position="normal" /></div>
            <div aria-hidden="true">{percent}%</div>
          </div>
          <WingBlank>
            <Button onClick={this.add}>(+)10</Button>
            <Button onClick={this.clear}>(-)10</Button>
          </WingBlank>
        </div> */}
      </div>
        )
    }
}
export default withRouter(InputForm)

